<!-- 文章列表 -->
<template>
  <el-row class="sharelistBox">
    
    <el-skeleton :loading="isLoading" animated :count="3" >
      <template slot="template">
        <el-skeleton-item
          variant="image"
          style="height: 267px;"
        />
        <div style="padding: 14px;">
          <el-skeleton-item variant="h3" style="width: 50%;" />
          <div
            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
          >
            <el-skeleton-item variant="text" style="margin-right: 16px;" />
            <el-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
    <el-col
      :span="24"
      class="s-item tcommonBox tcommonArtice"
      v-for="(item, index) in articleList"
      :key="'article' + index"
      :style="{ backgroundImage: 'url(' + item.thumbnail + ')' }"
      ><a :href="'#/DetailArticle?aid=' + item.id">
        <header>
          <p class="articleone" style="text-align: center">
            <a
              :class="['articletitle', { 'has-background': item.thumbnail }]"
              :href="'#/DetailArticle?aid=' + item.id"
              target="_blank"
            >
              {{ item.title }}
            </a>
            <span class="is-top" v-if="item.isTop === '0'">
              <svg
                class="icon tuijian"
                aria-hidden="true"
                style="width: 60px; height: 60px"
              >
                <use xlink:href="#icon-biaoqian-tuijian"></use>
              </svg>
            </span>
          </p>
          <h2>
            <span :class="['post-time', { 'has-background': item.thumbnail }]"
              ><svg class="icon huiyuan" aria-hidden="true">
                <use xlink:href="#icon-robot-img"></use></svg
              >发表于</span
            >
            <span :class="['post-time', { 'has-background': item.thumbnail }]"
              ><svg class="icon huiyuan" aria-hidden="true">
                <use xlink:href="#icon-shijian"></use></svg
            ></span>
            <span :class="['post-time', { 'has-background': item.thumbnail }]">
              {{ showInitDate(item.createTime, "all") }}
            </span>
            <span :class="['post-time', { 'has-background': item.thumbnail }]"
              >•
              <svg class="icon huiyuan" aria-hidden="true">
                <use xlink:href="#icon-yanjing"></use></svg
              >{{ item.viewCount }} 次围观 •</span
            >
          </h2>
        </header>
        <div class="article-content">
          <p
            :class="{
              'white-color': item.thumbnail,
              'black-color': !item.thumbnail,
            }"
            style="text-indent: 2em; text-align: center"
          >
            {{ item.summary }}
          </p>
        </div>
      </a>
    </el-col>
  </el-skeleton>
    <el-col class="viewmore">
      <a
        v-show="hasMore"
        class="tcolors-bg"
        href="javascript:void(0);"
        @click="addMoreFun"
        >点击加载更多</a
      >
      <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);"
        >暂无更多数据</a
      >
    </el-col>
  </el-row>
</template>

<script>
import { initDate } from "../utils/server.js";
import { articleList } from "../api/article";
export default {
  name: "Share",
  data() {
    //选项 / 数据
    return {
      // 查询参数
      isLoading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: 0,
      },
      articleList: [],
      hasMore: true,
    };
  },

  methods: {
    //事件处理器
    showInitDate: function (oldDate, full) {
      return initDate(oldDate, full);
    },
    getList() {
      articleList(this.queryParams).then((response) => {
        this.articleList = this.articleList.concat(response.rows);
        //console.log(response.rows)
        if (response.total <= this.articleList.length) {
          this.hasMore = false;
        } else {
          this.hasMore = true;
          this.queryParams.pageNum++;
        }

        // 延迟一秒后关闭 Loading
        setTimeout(() => {
          this.isLoading = false;
        }, 2000);
      });
    },
    showSearchShowList: function (initData) {
      //展示数据
      if (initData) {
        this.articleList = [];
      }
      this.getList();
    },
    addMoreFun: function () {
      //查看更多
      this.showSearchShowList(false);
    },
    routeChange: function () {
      var that = this;
      this.queryParams.categoryId =
        that.$route.query.classId == undefined
          ? 0
          : parseInt(that.$route.query.classId); //获取传参的classId
      this.showSearchShowList(true);
    },
  },
  components: {
    //定义组件
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "routeChange",
    "$store.state.keywords": "routeChange",
  },
  created() {
    //生命周期函数
    // console.log(this.$route);
    var that = this;
    that.routeChange();
  },
};
</script>

<style >
.tcommonArtice {
  height: 16rem !important;
}
.articleone {
  font-size: 1.5em;
}
.white-color {
  color: white; /* 设置文本颜色为白色 */
}

.black-color {
  color: black; /* 设置文本颜色为黑色 */
}
.black-color {
  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
}
.articletitle,
.post-time {
  color: black; /* 默认颜色为黑色 */
}

.has-background,
.has-background {
  color: rgb(255, 255, 255); /* 背景图片存在时，标题文字颜色为白色 */
}
h1 {
  /* font-size: 24px; */
  line-height: 38px;
}
.s-item {
  background-size: cover; /* 背景图等比例缩放并填满整个元素 */
  background-position: center; /* 背景图居中对齐 */
}
a,
.is-top {
  vertical-align: middle; /* 使用 vertical-align 属性将 span 的垂直对齐方式设置为 middle */
}

/*分享标题*/
.shareTitle {
  margin-bottom: 40px;
  position: relative;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
}
.tcolors-bg {
  background: #ec922a;
}
.shareclassTwo {
  width: 100%;
}
.shareclassTwo li {
  display: inline-block;
}
.shareclassTwo li a {
  display: inline-block;
  padding: 3px 7px;
  margin: 5px 10px;
  color: #fff;
  border-radius: 4px;
  background: #64609e;
  border: 1px solid #64609e;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover {
  transform: translate(0, -3px);
  -webkit-transform: translate(0, -3px);
}
.shareclassTwo li a.active {
  background: #fff;
  color: #64609e;
}
/*文章列表*/
.sharelistBox {
  transition: all 0.5s ease-out;
  font-size: 15px;
}

.tcommonBox:hover {
  -webkit-transition: all 0.2s linear;
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
/* .sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
        background: #48456C;
    } */
</style>
